<template>
	<div class="flex justify-between w-full items-center">
		<a-space wrap>
			<a-button
				type="primary"
				@click="
					() => {
						emits('changeDate', 'prev')
					}
				"
			>
				<LeftOutlined
			/></a-button>
			<a-button
				type="primary"
				@click="
					() => {
						emits('changeDate', 'next')
					}
				"
				><RightOutlined
			/></a-button>
			<a-button
				type="primary"
				@click="
					() => {
						emits('changeDate', 'today')
					}
				"
				>今天</a-button
			>
		</a-space>
		<div class="text-[20px]">
			{{ viewTitle }}
		</div>
		<a-radio-group v-model:value="actionValue" button-style="solid">
			<a-radio-button :value="action.value" v-for="action in actions" :key="action.value"
				>{{ action.label }}
			</a-radio-button>
		</a-radio-group>
	</div>

	<!--    <NGi class="flex justify-end items-center">-->
	<!--      <n-space vertical>-->
	<!--        <n-radio-group v-model:value="actionValue">-->
	<!--          <n-radio-button-->
	<!--            v-for="action in actions"-->
	<!--            :key="action.value"-->
	<!--            :value="action.value"-->
	<!--            :label="action.label"-->
	<!--          ></n-radio-button>-->
	<!--        </n-radio-group>-->
	<!--      </n-space>-->
	<!--    </NGi>-->
</template>
<script setup lang="ts">
	const emits = defineEmits(['changeView', 'changeDate'])
	// const { grandfatherMethod } = defineProps(['grandfatherMethod'])
	const actionValue = ref('timeGridWeek')
	const viewTitle = ref('')
	const actions = ref([
		{
			value: 'timeGridWeek',
			label: '周啊'
		},
		{
			value: 'timeGridDay',
			label: '日'
		},
		{
			value: 'dayGridMonth',
			label: '月'
		}
	])
	watch(
		() => actionValue.value,
		(value) => {
			emits('changeView', value)
		}
	)
	const refreshTitle = (title: string) => {
		viewTitle.value = title
	}
	onMounted(() => {})
	defineExpose({
		refreshTitle
	})
</script>
